body {
	font-size: 14px;
}

.hide {
	visibility: hidden;
}

.amount::before {
	content: '€';
	margin-right: 4px;
}

#payslip-sum .amount,
.detailed-data .amount,
.detailed-data .amount input {
	text-align: right;
}

#base-salary-full-amount,
#base-salary-full-amount input {
	text-align: left;
}

.list-group-item-text {
	margin-top: 0;
	padding-top: 0;
	font-weight: normal;
}

h4.list-group-item-heading {
	margin-bottom: 16px;
}

#base-salary-twentieths input,
.payslip-input {
	border: none;
	border-bottom: 1px dotted #000;
	outline: none;
	box-sizing: border-box;
	padding-top: 0;
}

.other-expenses form {
	display: inline-block;
}

.deposit-date a,
.voucher-description a {
	color: black;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	/* display: none; <- Crashes Chrome on hover */
	-webkit-appearance: none;
	margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

.other-expenses .payslip-input {
	margin-left: -5px;
}

.navbar {
	margin-bottom: 32px;
}

.signin-form h5 {
	margin-bottom: 0;
}

.next-previous-payslip-nav {
	margin-bottom: 20px;
}

.next-previous-payslip-nav .previous.nav-link {
	text-align: left;
	padding-left: 0;
}

.next-previous-payslip-nav .next {
	text-align: right;
	padding-right: 0;
}

.payslip-view .row.detailed-data {
	margin-top: 20px;
}

.payslip-view .row.detailed-data h5 {
	font-size: 14px;
}

.payslip-view .row.detailed-data:last-child {
	margin-bottom: 20px;
}

#payslip-sum h5,
.payslip-view .row.detailed-data h5 {
	margin-bottom: 0;
}

#base-salary-amount {
	text-align: left;
}

#balance-from-previous-month p {
	margin-bottom: 0;
}

.extras-sum,
.deposits-sum,
.vouchers-sum {
	margin-right: calc(1.25rem + 1px);
}

.heading-container.d-flex .btn {
	margin: 8px 0;
}

.heading-container {
	margin-top: 32px;
}

.deactivated-employees-container {
	margin: 16px 0 32px 0;
}

.employee-list .list-group-item:hover {
	background-color: #f5f5f5;
}

.employee-list .list-group-item a {
	line-height: 2.2;
}

.employee-item[data-status='deactivated'] .deactivate-employee,
.employee-item[data-status='active'] .restore-employee {
	display: none;
}

.employee-list-change-date {
	margin-bottom: 32px;
}
.employee-list-change-date input {
	max-width: 400px;
}
.employee-list-change-date #filter-by-company {
	width: 300px;
}
.employees-iban-list .list-header {
	font-size: large;
	font-weight: 500;
}
.employees-iban-list header,
.employees-iban-list .row {
	display: flex;
}
.employees-iban-list .col-flex-1, .employees-iban-list .col-flex-2 {
  display: flex;
	align-items: center;
	word-break: break-word;
	overflow: hidden;
	margin-right: 16px;
}

.employees-iban-list .col-flex-1:first-child {
  width: auto;
  flex: 1;
}

.employees-iban-list .col-flex-1 > *{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.employees-iban-list .list-group-item:not(:first-child) .amount-item::after {
  content: "€";
  padding-left: 4px;
}

.col-flex-1{
  flex: 1;
}
.col-flex-2 {
	flex: 2;
}

.deposit-list-item {
	position: relative;
}

.deposit-list-item::after {
	content: attr(data-balance) ' €';
	display: inline-block;
	position: absolute;
	right: calc(-150px - 1.25rem);
	height: 100%;
	top: 0;
	line-height: 42px;
	color: #6c757d;
	width: 150px;
}

.deposit-list-item[data-balance='0.00']::after {
	color: #28a745;
}

.deposit-list {
	position: relative;
}

.deposit-list[data-base-salary-paid-off='1'] > .list-group {
	margin-top: -24px;
}

.deposit-list[data-base-salary-paid-off='1'] > .list-group::before {
	color: #28a745;
	content: '✓';
	display: inline-block;
	position: relative;
	top: 32px;
	left: -32px;
	font-size: 16px;
	height: 24px;
}

.deposit-list[data-base-salary-paid-off='1'] > .list-group > .list-group-item:first-child {
	border-top-color: #28a745;
}

.deposit-list[data-base-salary-paid-off='1'] > .list-group > .list-group-item {
	border-left-color: #28a745;
	border-right-color: #28a745;
}

.deposit-list[data-base-salary-paid-off='1'] > .list-group > .list-group-item:last-child {
	border-bottom-color: #28a745;
}

payslip-deposit-list,
payslip-deposit {
	display: block;
}

.main-navbar li.navbar-item a {
	text-decoration: none;
	color: #579b57;
	margin-left: 16px;
}

.report-amount {
	text-align: right;
}

.report-amount::after {
	content: ' €';
}
.voucher-item.calculated.negative .amount {
	color: var(--bs-red);
}
.voucher-item.calculated.positive .amount {
	color: var(--bs-green);
}

#notes {
	width: 100%;
	height: 220px;
}

#month,
#year {
	height: 38px;
	margin-right: 16px;
}

#toggle-amount-column{
  margin-bottom: 16px;
  max-width: 300px;
}